<style scoped lang="scss">
.addressadd {
  background-color: $white-color;
  height: 94vh;
  padding-top: 1.0667rem;

  .addressadd-input-item {
    width: 9rem;
    height: 1.1733rem;
    display: flex;
    margin: 0 auto;
    align-items: center;
    border-bottom: 0.0533rem solid #e5e5e5;

    p {
      font-size: .4267rem;
      margin-right: 0.5rem;
      font-weight: 400;
      display: inline-block;
      width: 1.8rem;
      color: #a19f9f;
    }

    input {
      width: 7rem;
      height: 0.8rem;
      border: 0;
      outline: none;
      background-color: #ffffff00;
    }

    select {
      width: 7rem;
      height: 0.8rem;
      border: 0;
      outline: none;
      background-color: #ffffff00;
    }
  }

  .addressadd-input-checkbox {
    width: 9rem;
    height: 1.1733rem;
    display: flex;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;

    p {
      font-size: .4267rem;
      margin-right: 0.5rem;
      font-weight: 400;
      display: inline-block;
      color: #323233;
    }
  }

  .addressadd-submit {
    width: 9rem;
    height: 4.6667rem;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    align-items: center;
    justify-content: center;

    button {
      width: 9rem;
      height: 1.1733rem;
      background-color: #ee0a24;
      color: $white-color;
      font-size: 0.4267rem;
      border-radius: 1rem;
      border: 0;
      margin-bottom: 0.5rem;
    }

    button:nth-child(2) {
      background-color: #fff;
      border: .0267rem solid #ccc;
      color: black;
    }
  }
}
</style>
<template>
  <div class="addressadd">
    <vueHeader title="添加收货地址" path="addresslist"></vueHeader>
    <!-- 三个输入框 -->
    <div class="addressadd-input">
      <div class="addressadd-input-item">
        <p>
          姓名
        </p>
        <input type="text" placeholder="收货人姓名" v-model="list.username">
      </div>
      <div class="addressadd-input-item">
        <p>
          电话
        </p>
        <input type="text" placeholder="收货人手机号" v-model="list.userphone"
          v-phone-check:blur="(isValid) => isPhoneValid = isValid">
      </div>
      <div class="addressadd-input-item">
        <p>
          地区
        </p>
        <input type="text" :value="`${selectedAreaProvince}/ ${selectedAreaCity} /${selectedAreaDistrict}`"
          v-if="selectedAreaProvince">
        <input type="text" placeholder="请选择省 / 市 / 区" readonly @click="isPickerVisible = true"
          v-if="!selectedAreaProvince">
      </div>
      <div class="addressadd-input-item" style="border: 0;">
        <p>
          详细地址
        </p>
        <input type="text" placeholder="请输入详细地址" v-model="list.useraddress">
      </div>
    </div>
    <!-- 是否设为默认收货地址 -->
    <div class="addressadd-input-checkbox">
      <p>
        设为默认收货地址
      </p>
      <input type="checkbox" v-model="list.status">
    </div>
    <div class="addressadd-submit">
      <button @click="submit">
        保存
      </button>
      <button>
        删除
      </button>
    </div>
    <AreaPicker :showDefault.sync="isPickerVisible" :selectedAreaProvince.sync="selectedAreaProvince"
      :selectedAreaCity.sync="selectedAreaCity" :selectedAreaDistrict.sync="selectedAreaDistrict"></AreaPicker>
  </div>
</template>
<script>
import { submituseraddressApi } from '@/api/users/addressadd'
import vueHeader from '@/components/common/header/header.vue';
import AreaPicker from '@/components/common/AreaPicker.vue';
export default {
  components: {
    vueHeader,
    AreaPicker
  },
  data() {
    return {
      isPickerVisible: false,
      selectedAreaProvince: '',
      selectedAreaCity: '',
      selectedAreaDistrict: '',
      list: {
        uid: '',
        username: '',
        userphone: '',
        location: '',
        useraddress: '',
        status: 0
      },
      isPhoneValid: false
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const userInfo = localStorage.getItem('userInfo');
      const parsedUserInfo = userInfo ? JSON.parse(userInfo) : {};
      this.list.uid = parsedUserInfo.uid;
    },
    async submit() {
      if (!this.list.username) {
        this.$toast.show('请输入姓名', 'error', 'top')
        return
      }
      if (!this.isPhoneValid) {
        this.$toast.show('请输入正确的手机号', 'error', 'top')
        return
      }
      if (!this.selectedAreaProvince) {
        this.$toast.show('请选择地区', 'error', 'top')
        return
      }
      if (!this.list.useraddress) {
        this.$toast.show('请输入详细地址', 'error', 'top')
        return
      }
      try {
        const location = `${this.selectedAreaProvince}${this.selectedAreaCity}${this.selectedAreaDistrict}`;
        const params = {
          uid: this.list.uid,
          username: this.list.username,
          userphone: this.list.userphone,
          location: location,
          useraddress: this.list.useraddress,
          status: this.list.status === true ? 1 : 0
        }
        const res = await submituseraddressApi(params);
        console.log(res);
        if (res.code === 200) {
          console.log(res);
          this.$toast.show('添加成功', 'success', 'top')
          this.$router.push({
            name: 'addresslist'
          })
        }
      } catch (error) {
        console.error('添加失败:', error);
      }
    }
  }
}
</script>